<template>
  <el-dialog :title="ui.title"
             :visible="visibles"
             :before-close="handleClose"
             append-to-body
             width="500px"
             :lock-scroll="true">
    <el-form :model="form"
             ref="form">
      <el-row type="flex">
        <el-col :span="12">
          <el-row type="flex">
            <el-col>
              <mk-form-item label="姓名"
                            label-width="100px"
                            prop="realname"
                            :mk-le-length="20"
                            required>
                <el-input v-model="form.realname"
                          size="small"></el-input>
              </mk-form-item>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col>
              <mk-form-item label="昵称"
                            label-width="100px"
                            prop="nickname"
                            :mk-le-length="20"
                            required>
                <el-input v-model="form.nickname"
                          size="small"></el-input>
              </mk-form-item>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col>
              <mk-form-item label="联系电话"
                            label-width="100px"
                            prop="phone"
                            :mk-le-length="11"
                            required>
                <el-input v-model="form.phone"
                          size="small"></el-input>
              </mk-form-item>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col>
              <mk-form-item label="角色"
                            label-width="100px"
                            prop="roleid"
                            required>
                <el-popover ref="popover"
                            v-model="ui.roleTreeVisible"
                            placement="bottom"
                            title='选择角色'
                            trigger="click">
                  <el-tree :data="treeData"
                           :highlight-current="true"
                           :expand-on-click-node="false"
                           :default-expand-all="true"
                           @node-click="subnode_pid" />
                </el-popover>
                <el-input placeholder="请选择角色"
                          class="input_pointer"
                          :readonly="true"
                          v-model="form.rolename"
                          v-popover:popover
                          size="small">
                </el-input>
              </mk-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <mk-form-item label="头像"
                        prop="headurl"
                        :mk-le-length="500"
                        label-width="100px"
                        required>
            <mk-upload v-model="form.headurl"
                       :limit="1"
                       type="IMAGE"
                       :choose="false"
                       :width="99"
                       :height="99"
                       list-type="card"></mk-upload>
          </mk-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <mk-button @click="handleClose">取消</mk-button>
      <mk-button @click="saveForm()"
                 :type="2">确定</mk-button>
    </div>
  </el-dialog>
</template>


<script>
import { MkBase } from 'element-ui'
import clone from 'lodash.clone'
import MkUpload from 'sbin/upload'
import recursionTree from 'element-ui/lib/utils/mk-business-util'

export default {
  mixins: [MkBase],
  components: {
    MkUpload
  },
  data () {
    return {
      ui: {
        visible: true,
        roleTreeVisible: false,
        title: '新增用户'
      },
      treeData: [],
      form: {
        // 对话框的信息
        realname: '', // 姓名
        phone: '', // 电话
        email: '', // 邮箱
        userremark: '', // 用户备注
        userstate: '', // 用户状态1正常0冻结
        usertype: '', // 用户类型 0=平台,1=企业账号,2=仓库账号
        password: '', // 密码
        userid: '', // 用户ID
        userface: '', // 用户头像

        roleid: '', // 角色ID

        rolename: '' // 角色名称、
      },
      showHow: 0 // 当前是修改还是新增
    }
  },
  methods: {
    // 选择角色点击事件
    subnode_pid: function (data) {
      this.form.roleid = data.roleid
      this.form.rolename = data.rolename
      this.ui.roleTreeVisible = false
    },
    saveForm () {
      if (this.form.userid) {
        this.updateUserData()
      } else {
        this.addUserData()
      }
    },
    // 点击确定/取消按钮，第二个参数大于0有员工数据
    hideDialog: async function (show, clickWhich) {
      let userInfo = null

      // 如果点击确定，which大于0
      if (clickWhich > 0) {
        if (!this.validate) {
          let fn = this.$refs.form.validate
          let nodejs = false

          this.validate = this.$promise({ fn, nodejs })
        }
        if ((await this.validate()) === false) {
          return
        }
        userInfo = this.form
      } else {
        // 点击 取消 或者之间关闭对话框，重置对话框
        this.$refs.form.resetFields()
      }

      // 输入的用户信息合格，或者点击取消关闭按钮，调用父类关闭对话框
      this.$emit('operaEcho', show, this.showHow, userInfo)
    },

    loadRoles: async function () {
      try {
        // region  递归处理角色
        let data = await this.$get('/cpSsorole/list.json')
        recursionTree({
          source: data,
          key: 'roleid',
          label: 'rolename',
          children: 'listDTO'
        })
        this.treeData = data
      } catch (e) {
        alert(e.message)
      }
    },
    // 新增员工
    addUserData: async function () {
      try {
        let userData = await this.$post('/user/add.json', {
          cpUser: this.form,
          roleid: this.form.roleid
        })
        if (userData) {
          this.$message('添加员工信息成功')
          this.handleClose(true)
        }
        // 新增员工后刷新列表
      } catch (e) {
        // this.$message({messge:e.message,type:'error'});
      }
    },
    // 修改
    updateUserData: async function () {
      try {
        let userData = await this.$put('/user/update.json', {
          cpUser: this.form,
          roleid: this.form.roleid
        })
        if (userData) {
          if (userData.result > 0) {
            this.$message('编辑员工信息成功')
            this.handleClose(true)
          }
        }
        // 新增员工后刷新列表
      } catch (e) {
        // this.$message({messge:e.message,type:'error'});
      }
    },
    // 点击关闭按钮后
    handleClose (flag) {
      this.$emit('close', flag)
    }
  },
  props: {
    userInfo: Object,
    visibles: {type: Boolean, default: false}
  },
  async mounted () {
    await this.loadRoles()
    // 打开对话框
    if (this.userInfo && this.userInfo.userid) {
      // 修改员工
      this.ui.title = '修改用户'
      this.form = clone(this.userInfo)
    } else {
      // 新增员工
      // 对象置空
      this.$empty(this.form)
      this.form.userstate = '1'
      this.form.usertype = '0'
      this.form.rolename = ''
    }
  }
}
</script>
